<ion-header>
    <ion-toolbar class="toolbar-head" >
        <div class="searchTop">
            <div class="search" (click)="search()">
                <img src="../../assets/img/index/sousuo.png" alt="">
                <ion-input type="search" [(ngModel)]="searchValue" disabled (click)="search()"  ></ion-input>
            </div>
            <img (click)="onTtKeFu()" src="../../assets/img/index/kefu.png" alt="">
        </div>
        <!-- <img src="../../../../assets/img/activity/share.png" slot="end" alt=""> -->
    </ion-toolbar>
</ion-header>
<ion-content style="--background:#4d4d4d">
    <!-- 顶部搜索 -->
    <!-- <div class="searchTop">
        <div class="search" (click)="search()">
            <img src="../../assets/img/index/sousuo.png" alt="">
            <ion-input type="search" placeholder="Nike" disabled (click)="search()"></ion-input>
        </div>
        <img src="../../assets/img/index/kefu.png" alt="">
    </div> -->
    <!-- 轮播图 -->
    <div class="slides-carousel">
        <ion-slides  pager="ios" [options]="slideOpts" scrollbar="false">
            <ion-slide *ngFor="let item of headerSlideData" >
                <div style="width:100%;">
                    <img src="{{item.newsCapImg}}" onerror="this.src='../../assets/img/home/lunbo.png';this.onerror=null"
                    alt="" (click)="onClickUrl(item)">
                </div>
            </ion-slide>
        </ion-slides>
    </div>
    <!-- 商品分类 -->
    <div class="classification">
        <div class="title">
            <div class="transverse"></div>
            <div>Categories</div>
            <div class="transverse"></div>
        </div>
        <div class="product" >
            <div class="gap">
                <div style="margin-bottom: 5px;" (click)="onLinkTo('Shoes')">
                    <span class="tab1-span-text tab1-span-text-height">
                        Shoes</span>
                    <img  src="../../assets/img/index/pic.png" alt="">
                </div>
                <div (click)="onLinkTo('Clothing')">
                    <span class="tab1-span-text tab1-span-text-height">Clothing</span>
                    <img src="../../assets/img/index/pic1.png" alt="">
                </div>
            </div>
            <div class="gap"  (click)="onLinkTo('Featured')">
                <span class="tab1-span-text tab1-span-text-height-1">Featured</span>
                <img src="../../assets/img/index/pic2.png" alt="">
            </div>
        </div>
        <div class="productImg" >
            <div (click)="onLinkTo('Accesseries')">
                <span class="tab1-span-text tab1-span-text-height">Accesseries</span>
                <img src="../../assets/img/index/pic3.png" alt="">
            </div>
            <div [routerLink]="['/tabs/tab2']" routerLinkActive="router-link-active" >  <span class="tab1-span-text tab1-span-text-height">More</span>
                <img src="../../assets/img/index/pic4.png" alt=""></div>
        </div>
        <!-- 最新商品 -->
        <div class="title">
            <div class="transverse"></div>
            <div>New Arrivals</div>
            <div class="transverse"></div>
        </div>
        <div class="commodity">
            <div class="item" *ngFor="let item of procNewProcArray" (click)="onClickItem(item)">
                <!-- <div><img src="{{item.procImg}}" alt=""></div> -->
                <div><img onerror="this.src='../../assets/img/index/pic5.png';this.onerror=null" src="{{solaImage(item.procImg)}}" alt=""></div>
                <!-- <div class="name">{{item.procName}}</div> -->
                <div class="line-clamp-div ">
                    <p class="line-clamp ">{{item.procName}}
                    </p>
                </div>
                <div class="price"><label style="font-size: 1rem;">$</label>{{AmountOfConversion(item.procCashPrice)}}  
                     <!-- <span>{{item.salesVolume?item.salesVolume:'0'}} buy</span> -->
                    </div>
            </div>

        </div>
    </div>
    <!-- <div class="title">
            <img src="../../assets/img/home/addr.png" alt="">
            <ion-label>定位</ion-label>
            <div class="search">
                <img src="../../assets/img/search.png" alt="">
                <ion-input type="search" placeholder="Awesome Input"></ion-input>
            </div>
            <div class="slides-carousel">
                <ion-slides mode="ios" pager="ios" [options]="slideOpts" scrollbar="ios">
                    <ion-slide>
                        <div style="width:100%;">
                            <img src="../../assets/img/home/lunbo.png" alt="">
                        </div>
                    </ion-slide>
                </ion-slides>
            </div>
        </div> -->
    <!-- <nav id="nav" style="box-shadow: 0 0px 0px #ebebeb;border-radius: 5px;">
        <span (click)="routerLink(1)">
            <img src="assets/img/home/seckill.png" alt="">
            <h2>限时秒杀</h2>
        </span>
        <span (click)="routerLink(2)">
            <img src="assets/img/home/buying.png" alt="">
            <h2>限时拼团</h2>
        </span>
        <span [routerLink]="['/sign-in']" routerLinkActive="router-link-active" >
            <img src="assets/img/home/sign.png" alt="">
            <h2>立即签到</h2>
        </span>
        <span [routerLink]="['/raffle']" routerLinkActive="router-link-active" >
            <img src="assets/img/home/integral.png" alt="">
            <h2>立即抽奖</h2>
        </span>
        <span [routerLink]="['/integral-shopping']" routerLinkActive="router-link-active" >
            <img src="assets/img/home/store.png" alt="">
            <h2>积分商城</h2>
        </span>
    </nav> -->

    <!-- <img style="width: 100%; height: 160px; margin-top: 20px;" src="../../assets/img/home/banner.png" alt=""> -->


    <!-- <div class="booking">
        <div class="booking-left" style="">
            <ion-item   lines='none' slot="start" style="--padding-start:8px;--padding-end:0px;  border-radius:20px;">
                <label style="min-width: 40px;">秒杀</label>
                <span>00</span><a style="color:rgba(221,76,75,1); padding: 0 2px;">:</a>
                <span>00</span> <a style="color:rgba(221,76,75,1);padding: 0 2px;">:</a>
                <span>00</span>
                <ion-note slot="end" style="margin-left:0;margin-right: 0;padding: 10px 0;margin-top: 5px;" [routerLink]="['/time-aty']" routerLinkActive="router-link-active">更多</ion-note>
            </ion-item>
            <div class="booking-image" style="padding-left: 10px;">
                <img src="../../assets/img/home/shop-1.png" alt="">
                <img src="../../assets/img/home/shop-2.png" alt="">
                <img src="../../assets/img/home/shop-1.png" alt="">
                <img src="../../assets/img/home/shop-2.png" alt="">
            </div>
        </div>

        <div class="booking-right">
            <ion-item lines='none' slot="start" style="--padding:0px;border-radius:20px;">
                <label>拼团</label>
                <ion-note slot="end">更多</ion-note>
            </ion-item>
            <div class="booking-image" style="padding-left: 10px;">
                <img src="../../assets/img/home/shop-1.png" alt="">
                <img src="../../assets/img/home/shop-2.png" alt="">
                <img src="../../assets/img/home/shop-1.png" alt="">
                <img src="../../assets/img/home/shop-2.png" alt="">
            </div>
        </div>
        <div style="width:1px; height:260px; background:rgba(0,0,0,1); opacity:0.1;margin-left: 50%;"></div>
    </div> -->

    <!-- <ion-segment (ionChange)="segmentChanged($event)" scrollable='true' class="segment-btn">
        <div *ngFor="let item of menuList">
            <ion-segment-button value="{{item.id}}">
                <ion-label>{{item.value}}</ion-label>
                <div *ngIf="item.select" style="width:25px;height:2px; background:rgba(255,55,21,1);border-radius:2px;">
                </div>
            </ion-segment-button>
        </div>
    </ion-segment> -->

    <!-- <div class="shop-list">
        <div class="shop-list-item">
            <img src="../../assets/img/home/shoes.png" alt="">
            <div
                style="font-size: 16px; word-break: break-all; border-collapse: collapse; padding: 8px; text-overflow: ellipsis; overflow: hidden; height: 50px">
                Air Jordan Retor Hligh Calss Light 条形码 形码 形码
            </div>
        </div>

        <div class="shop-list-item">
            <img src="../../assets/img/home/shoes.png" alt="">
            <div
                style="font-size: 16px; word-break: break-all; border-collapse: collapse; padding: 8px; text-overflow: ellipsis; overflow: hidden; height: 50px">
                Air Jordan Retor Hligh Calss Light 条形码 形码 形码
            </div>
        </div>

        <div class="shop-list-item">
            <img src="../../assets/img/home/shoes.png" alt="">
            <div
                style="font-size: 16px; word-break: break-all; border-collapse: collapse; padding: 8px; text-overflow: ellipsis; overflow: hidden; height: 50px">
                Air Jordan Retor Hligh Calss Light 条形码 形码 形码
            </div>
        </div>

        <div class="shop-list-item">
            <img src="../../assets/img/home/shoes.png" alt="">
            <div
                style="font-size: 16px; word-break: break-all; border-collapse: collapse; padding: 8px; text-overflow: ellipsis; overflow: hidden; height: 50px">
                Air Jordan Retor Hligh Calss Light 条形码 形码 形码
            </div>
        </div>
    </div> -->
</ion-content>